<template>
  <div class="login">
    <div class="logincont">
      <van-icon class='cross' name="cross" @click="headleBackorders" />
      <div class="telcon">手机号:{{tel}}</div>
      <div class="person_txyzm">
        <span>图形验证码</span>
        <input type="text" placeholder="" class="txyzm" v-model="txyzmcode" placeholder="请输入验证码">
        <div class="txyzmsendcode">
          <img :src="imgFile" @click="refreshCode" />
        </div>

      </div>
      <div class="person_yzm">
        <span>验证码</span>
        <input type="text" placeholder="" class="smscode" v-model="smscode" placeholder="请输入验证码">
        <van-button type="info" class="sendcode" size='small' :disabled="isDisabled" @click="sendCode" v-if="yzmstyle"
          style="background:#FF3B30;color:#fff">{{buttonText}}</van-button>
        <van-button type="info" class="sendcode" size='small' :disabled="isDisabled" @click="sendCode" v-if="!yzmstyle">{{buttonText}}</van-button>
      </div>
      <van-button type="warning" size='small' class="person_sumbit" @click='person_sumbit'>提交</van-button>
    </div>
  </div>
</template>

<script>
  import {
    imgCaptcha,
    verifyCaptcha,
    getCaptcha,
    setCookie,
    getCookie,
    delCookie
  } from '@/api/index'
  export default {
    props: {
      tel: String
    },
    data() {
      return {
        style: false,
        yzmstyle: false,
        buttonText: "发送验证码",
        isDisabled: false, // 是否禁止点击发送验证码按钮
        flag: true,
        smscode: '',
        txyzmcode: '',
        imgFile: '',
      }

    },
    watch: {
      tel: {
        immediate: true, // 这句重要
        handler(val) {
          this.getimgCaptcha()
        }
      },
    },
    mounted() {
      this.getimgCaptcha();
    },
    methods: {
      getimgCaptcha() {
        imgCaptcha({
          phone: this.tel
        }).then(res => {
          this.imgFile = res.data.image;
        })
      },
      checkMobile(str) {
        let re = /^1\d{10}$/;
        if (re.test(str)) {
          return true;
        } else {
          return false;
        }
      },
      refreshCode() {
        this.getimgCaptcha();
      },
      // 发送验证码
      sendCode() {
        let tel = this.tel;
        var params = new URLSearchParams();
        params.append("phone", tel);
        if (this.txyzmcode == '') {
          this.$toast("请填写图形验证码");
        } else {
          verifyCaptcha({
            phone: this.tel,
            captcha: this.txyzmcode,
            type: 'IMG'
          }).then(res => {
            if (res.code == '200') {
              var params = new URLSearchParams();
              params.append("phone", tel);
              getCaptcha(params).then(res => {
                if (res.code == '200') {
                  if (this.checkMobile(tel)) {
                    let time = 60;
                    this.buttonText = "已发送";
                    this.isDisabled = true;
                    if (this.flag) {
                      this.flag = false;
                      this.timer = setInterval(() => {
                        time--;
                        this.buttonText = time + " 秒";
                        if (time === 0) {
                          clearInterval(this.timer);
                          this.buttonText = "再次发送";
                          this.isDisabled = false;
                          this.flag = true;
                        }
                      }, 1000);
                    }
                  } else if (tel == "") {
                    this.$toast("手机号不能为空");
                  } else {
                    this.$toast("请填写正确的手机格式");
                  }

                } else {
                  this.$toast(res.msg);
                }
              })

            } else {
              this.$toast("图形验证码输入错误");
              // this.txyzmcode = '';
            }

          })

        }

      },
      //提交
      person_sumbit() {
        if (this.txyzmcode == '') {
          this.$toast("请填写图形验证码");
        } else if (this.smscode == '') {
          this.$toast("请填写验证码");
        } else {
          verifyCaptcha({
            phone: this.tel,
            captcha: this.txyzmcode,
            type: 'IMG'
          }).then(res => {
            if (res.code == 200) {
              verifyCaptcha({
                phone: this.tel,
                captcha: this.smscode,
                type: 'PHONE'
              }).then(res => {
                if (res.code == 200) {
                  setCookie('phone', this.tel, 7);
                  setCookie('phoneToken', res.data, 7);
                  this.txyzmcode = '';
                  this.smscode = '';
                  clearInterval(this.timer);
                  this.buttonText = "再次发送";
                  this.style = false;
                  this.yzmstyle = false;
                  this.isDisabled = false; // 是否禁止点击发送验证码按钮
                  this.flag = true;
                  this.$emit('personsumbit')

                } else {
                  this.$toast("验证码输入错误");
                  this.smscode = '';
                }
              })
            } else {
              this.$toast("图形验证码输入错误");
              this.txyzmcode = '';
            }
          })
        }


      },
      headleBackorders() {
        this.txyzmcode = '';
        this.smscode = '';
        clearInterval(this.timer);
        this.buttonText = "再次发送";
        this.style = false;
        this.yzmstyle = false;
        this.isDisabled = false; // 是否禁止点击发送验证码按钮
        this.flag = true;
        this.$emit('headleBackorders')
      },

    },
  }
</script>

<style lang="scss">
  .logincont {
    padding: 30px 20px;
    position: relative;

    .cross {
      position: absolute;
      right: 10px;
      top: 20px;


    }

    .telcon {
      font-size: 24px;
      color: #333;
      line-height: 48px;
      margin-bottom: 20px;
    }

    .person_txyzm {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;

      span {
        font-size: 14px;
        color: #666;
        font-weight: 200;
        line-height: 30px;
        // width: 70px;
        padding: 2px;
      }

      .txyzm {
        width: 140px;
        border: none;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        color: #bbb;
        font-weight: 200;
      }

      .txyzmsendcode {
        width: 87px;
        height: 30px;
        border: 1px solid #3894FF;
        border-radius: 4px;

        img {
          width: 98%;
          height: 0.8rem;
          text-align: center;
          margin: auto;
          display: block;

        }

        .van-button__text {
          color: #3894FF !important;
          font-size: 12px;

        }
      }
    }

    .person_yzm {
      display: flex;
      justify-content: space-around;
      margin-bottom: 40px;

      span {
        font-size: 14px;
        color: #666;
        font-weight: 200;
        line-height: 30px;
        // width: 70px;
        padding: 2px;
      }

      .smscode {
        width: 140px;
        border: none;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        color: #bbb;
        font-weight: 200;
      }

      .sendcode {
        line-height: 20px;
        border-radius: 3px;
        background-color: rgba(233, 243, 255, 1);
        color: #3894FF !important;
        text-align: center;

        .van-button__text {
          color: #3894FF !important;
          font-size: 12px;
        }
      }

    }

    .person_tip {
      font-size: 12px;
      font-weight: 200;
      color: #bbb;
      text-align: left;
      margin-bottom: 25px;
    }

    .person_sumbit {
      background-color: rgba(244, 197, 105, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      text-align: center;
      box-shadow: 0px 0px 6px 0px rgba(59, 48, 25, 0.31);
      width: 100px;
      height: 38px;
      display: block;
      margin: auto;
    }
  }
</style>
